<template>
	<view class="content">
		<z-paging ref="paging" :fixed="false" :height="height" v-model="dataList" @query="queryList">
			<view class="content_item" v-for="item in dataList" :key="item.id">
				<view class="u-flex u-row-between"  @click="toCompanyDetail(item.id)">
					<view class="u-flex">
						<u-image :src="item.logo_src" width="128" height="128"></u-image>
						<view class="u-m-l-20 content_item_info">
							<view class="u-white-60 u-line-1 u-font-32 u-font-weight">
								{{item.companyname}}
							</view>
							<view class="u-flex u-row-left u-m-t-10 u-font-26" style="color: #867F7F;">
								<text class="u-line-1">{{item.nature_text}}</text>
								<u-line margin="0 10rpx" :hair-line="false" length="25rpx" direction="col"
									color="#867F7F"></u-line>
								<text class="u-line-1">{{item.scale_text}}</text>
								<u-line margin="0 10rpx" :hair-line="false" length="25rpx" direction="col"
									color="#867F7F"></u-line>
								<text class="u-line-1" style="width: 200rpx;">{{item.trade_text}}</text>
							</view>
							<view class="u-white-40 u-line-1 u-m-t-10" style="color: #646363 100%;"
								v-if="item.tag_text_arr.length > 0">
								{{item.tag_text_arr.join(',')}}
							</view>
						</view>
					</view>
					<u-icon name="arrow-right" color="#bbbbbb" size="44"></u-icon>
				</view>
				<template v-if="item.job_list.length > 0">
					<view class="content_item_job u-m-t-30" v-for="(job,ix) in item.job_list.slice(0,1)" :key="ix" @click="toJobDetail(job.id)">
						<view class="u-flex u-row-between">
							<view class="content_item_job--tit">
								{{job.jobname}}
							</view>
							<view class="content_item_job--salary">
								{{job.wage_text}}
							</view>
						</view>
						<view class="u-flex u-row-left u-m-t-10">
							<text>{{job.education_text}}</text>
							<u-line v-if="job.scale_text" margin="0 10rpx" :hair-line="false" length="25rpx"
								direction="col" color="#867F7F"></u-line>
							<text>{{job.scale_text}}</text>
						</view>
					</view>

					<view class="content_item_btn u-m-t-20"  @click="toCompanyDetail(item.id,true)">
						共有
						<text>{{item.job_list.length}}</text>
						个在招职位
						<u-icon name="arrow-right" color="#bbbbbb" size="30"></u-icon>
					</view>
				</template>

			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		nextTick,
		ref,
		watch
	} from 'vue'
	const props = defineProps({
		height: String,
		params: Object
	})
	// 获取列表数据
	const paging = ref(null)
	let dataList = ref([])
	watch(props.params, (nv) => {
		nextTick(() => {
			paging.value.reload(true)
		})
	}, {
		deep: true
	})
	const emit = defineEmits(['click'])
	// 去职位详情页
	const toJobDetail = (id) =>{
		uni.$u.route('pages/pagesHome/detailPages/job', {
			id
		})
	}
	// 去公司详情页
	const toCompanyDetail = (id,show = false) => {
		uni.$u.route('pages/pagesHome/detailPages/company', {
			id,
			show
		})
	}
	// 获取公司列表数据
	const queryList = async (pageNo, pageSize) => {
		let params = Object.assign({
			page: pageNo,
			pagesize: pageSize,
		}, props.params)

		let res = await uni.$u.api.getCorpList({
			params
		})
		if (res) {
			paging.value.complete(res.items)
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		background-color: #f1f1f1;

		&_item {
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 10rpx;
			color: #101010;

			/* #ifdef MP-WEIXIN */
			:deep(u-line) {
				flex: none;
			}

			/* #endif */

			&_info {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start
			}

			&_job {
				color: #8A8888;
				font-size: 26rpx;

				&--tit {
					color: #101010;
					font-size: 32rpx;
					font-weight: bold;
				}

				&--salary {
					color: #00D075;
					font-size: 32rpx;
				}
			}

			&_btn {
				background-color: #fff;
				color: #8a8888;
				font-size: 30rpx;
				height: 74rpx;
				line-height: 74rpx;
				text-align: center;
				border: 1px solid #bbbbbb;

				text {
					color: #F37429;
				}
			}
		}
	}
</style>